import React, { useState, useEffect } from 'react';
import { ConductorSpecAPI } from '@/api/ConductorSpec';

export default function CrossingPointConductorInfo({ conductorSpecId, conductorNumber }) {
  const [cpConductorSpec, setCpConductorSpec] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const loadSpec = async () => {
      try {
        if (conductorSpecId) {
          const spec = await ConductorSpecAPI.get(conductorSpecId);
          setCpConductorSpec(spec.data);
        }
      } catch (error) {
        console.error('加载跨越点导线规格失败:', error);
      } finally {
        setIsLoading(false);
      }
    };
    loadSpec();
  }, [conductorSpecId]);

  if (isLoading) {
    return <div className="text-xs text-gray-500">加载中...</div>;
  }

  if (!cpConductorSpec) {
    return <div className="text-xs text-gray-500">未设置导线型号</div>;
  }

  return (
    <div className="font-medium text-gray-900">
      {cpConductorSpec.model}
      {conductorNumber && conductorNumber > 1 && (
        <span className="text-xs text-gray-500 ml-1">
          (×{conductorNumber})
        </span>
      )}
    </div>
  );
}